<template>
  <div>
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" class="form">
      <el-form-item label="国家" prop="menuName"  style="margin-left: 40px">
        <el-input
          v-model="queryParams.country"
          placeholder="请输入国家名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      ref="filterTable"
      border
      :data="tableData"
      v-loading="loading"
      style="width: 100%;margin-left: 20px"
      :default-sort = "{prop: 'goldMedal', order: 'descending'}">
      <el-table-column
        prop="ranking"
        label="名次"
        width="180">
      </el-table-column>
      <el-table-column
        prop="country"
        label="国家/地区"
        width="180">
      </el-table-column>
      <el-table-column
        prop="goldMedal"
        sortable
        width="180">
        <template slot="header">
          <i class="icon_jin"></i>
          <span>金</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="silverMedal"
        sortable
        width="180">
        <template slot="header">
          <i class="icon_yin"></i>
          <span>银</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="bronze"
        sortable
        width="180">
        <template slot="header">
          <i class="icon_tong"></i>
          <span>铜</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="sum"
        label="总数"
        width="180">
      </el-table-column>
      <el-table-column
        prop="date"
        label="日期"
        sortable
        width="180"
        column-key="date"
        :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
        :filter-method="filterHandler"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        :formatter="formatter">
      </el-table-column>
      <el-table-column
        prop="tag"
        label="标签"
        width="100"
        :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
        :filter-method="filterTag"
        filter-placement="bottom-end">
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.tag === '家' ? 'primary' : 'success'"
            disable-transitions>{{scope.row.tag}}</el-tag>
        </template>
      </el-table-column>
    </el-table>
<!--    <div  class="el-select el-select&#45;&#45;mini">-->
      <pagination
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
<!--    </div>-->
<!--  <el-button @click="resetDateFilter">清除日期过滤器</el-button>-->
<!--  <el-button @click="clearFilter">清除所有过滤器</el-button>-->

  </div>
</template>

<script>
export default {
  name: "leaderboard",
  data() {
    return {
      queryParams: {
        country: null,
        pageNum: 1,
        pageSize:10
      },
      total:0,
      tableData:[],
      loading:false,
      showSearch: true,
    }
  },
  created() {
    this.getList()
  },
  methods: {

    // 查询列表
    getList() {
      // this.loading = true;
      this.tableData =[
        {
          // date: '2016-05-02',
          // name: '王小虎',
          // address: '上海市普陀区金沙江路 1518 弄',
          ranking: 1,
          country: '中国',
          goldMedal: 10,
          silverMedal: 13,
          bronze: 23,
          sum: 46,
          tag: '家'
        }, {
          // date: '2016-05-04',
          // name: '王小虎',
          // address: '上海市普陀区金沙江路 1517 弄',
          ranking: 2,
          country: '加拿大',
          goldMedal: 5,
          silverMedal: 13,
          bronze: 23,
          sum: 41,
          tag: '公司'
        }, {
          // date: '2016-05-01',
          // name: '王小虎',
          // address: '上海市普陀区金沙江路 1519 弄',
          ranking: 3,
          country: '俄国',
          goldMedal: 4,
          silverMedal: 13,
          bronze: 23,
          sum: 40,
          tag: '家'
        }, {
          // date: '2016-05-03',
          // name: '王小虎',
          // address: '上海市普陀区金沙江路 1516 弄',
          ranking: 4,
          country: '美国',
          goldMedal: 4,
          silverMedal: 13,
          bronze: 20,
          sum: 37,
          tag: '公司'
        }]
      // listMenu(this.queryParams).then(response => {
      //   this.menuList = this.handleTree(response.data, "menuId");
      //   this.loading = false;
      // });
    },
    handleQuery() {
      this.getList();
    },
    // 重置
    resetQuery() {
      debugger
      this.queryParams.country = null;
    },

    resetDateFilter() {
      this.$refs.filterTable.clearFilter('date');
    },
    clearFilter() {
      this.$refs.filterTable.clearFilter();
    },
    formatter(row, column) {
      return row.address;
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    filterHandler(value, row, column) {
      const property = column['property'];
      return row[property] === value;
    }
  }

}
</script>

<style rel="stylesheet/scss" lang="scss">
.form {
  margin-top: 20px;
  margin-bottom: 10px;
}
.icon_jin {
  position: absolute;
  display: inline-block;
  left: 50px;
  padding-top: 1px;
  width: 20px;
  height: 29px;
  background-image: url(https://inews.gtimg.com/newsapp_bt/0/1231112549302_5173/0);
  background-position-x: initial;
  background-position-y: initial;
  background-size: 100%;
  background-repeat-x: initial;
  background-repeat-y: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
  background-size: 100%;
}
.icon_yin {
  position: absolute;
  display: inline-block;
  left: 50px;
  padding-top: 1px;
  width: 20px;
  height: 29px;
  background: url(https://inews.gtimg.com/newsapp_bt/0/1231113333499_5413/0) center no-repeat;
  background-image: url(https://inews.gtimg.com/newsapp_bt/0/1231113333499_5413/0);
  background-position-x: center;
  background-position-y: center;
  background-size: 100%;
  background-repeat-x: no-repeat;
  background-repeat-y: no-repeat;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
  background-size: 100%;
}
.icon_tong {
  position: absolute;
  display: inline-block;
  left: 50px;
  padding-top: 1px;
  width: 20px;
  height: 29px;
  background: url(https://inews.gtimg.com/newsapp_bt/0/1231113331290_3204/0) center no-repeat;
  background-image: url(https://inews.gtimg.com/newsapp_bt/0/1231113331290_3204/0);
  background-position-x: center;
  background-position-y: center;
  background-size: 100%;
  background-repeat-x: no-repeat;
  background-repeat-y: no-repeat;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: initial;
  background-size: 100%;
}

//.el-select {
//  display: inline-block;
//  position: relative;
//  margin-right: 100px;
//}


</style>
